From 6592c6f51fd9fe65828b21307085b830371cabbb Mon Sep 17 00:00:00 2001
From: Matthias Clasen <mclasen@redhat.com>
Date: Sat, 31 Oct 2015 10:25:50 -0400
Subject: [PATCH] Adwaita: Adapt notebook styling a bit

This needs a lot more work.
---
 gtk/theme/Adwaita/_common.scss           | 116 ++++++----------
 gtk/theme/Adwaita/gtk-contained-dark.css | 165 ++++++++++-------------
 gtk/theme/Adwaita/gtk-contained.css      | 165 ++++++++++-------------
 3 files changed, 178 insertions(+), 268 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 89cb6f0140..6b5ce55f77 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1572,20 +1572,15 @@ notebook {
   }
   &.frame {
     border: 1px solid $borders_color;
-    // FIXME doesn't work
-    &.top { border-top-width: 0; }
-    &.bottom { border-bottom-width: 0; }
-    &.right { border-right-width: 0; }
-    &.left { border-left-width: 0; }
     &:backdrop { border-color: $backdrop_borders_color; }
   }
-  &.header {
+  & header {
     // FIXME: double borders in some case, can't fix it w/o a class tho
     // FIXME: doesn't work on dark var
     background-color: mix($bg_color, $borders_color, 70%);
 
     // this is the shading of the header behind the tabs
-    &.frame {
+    .frame & {
       border: 1px solid $borders_color;
       &.top { border-bottom-width: 0; }
       &.bottom { border-top-width: 0; }
@@ -1621,85 +1616,58 @@ notebook {
       box-shadow: none;
     }
   }
-  tab {
-    border-width: 0;
-    border-style: solid;
-    border-color: transparent;
-    background-color: transparent;
-
-    outline-offset: 0;
-
-    $tab_indicator_size: 3px;
-    //vertical tab sizing
-    $vt_vpadding: 8px;
-    $vt_hpadding: 20px;
-    // horizontal tab sizing
-    $ht_vpadding: 5px;
-    $ht_hpadding: 20px;
-
-    //FIXME: we get double border in some cases, not considering the broken
-    //notebook content frame...
-    &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
-    &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
-
+  //vertical tab sizing
+  $vt_vpadding: 8px;
+  $vt_hpadding: 20px;
+  // horizontal tab sizing
+  $ht_vpadding: 5px;
+  $ht_hpadding: 20px;
+  $tab_indicator_size: 3px;
 
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
+  & header.top tab {
+    padding: $vt_vpadding $vt_hpadding;
+    border-bottom-width: $tab_indicator_size;
     &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
+        padding-left: 12px;  // for a nicer close button
+        padding-right: 12px; // placement
         border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
         border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
     }
-    */
+  }
+  & header.bottom tab {
+    padding: $vt_vpadding $vt_hpadding;
+    border-top-width: $tab_indicator_size;
     &.reorderable-page {
-      &.top, &.bottom {
         padding-left: 12px;  // for a nicer close button
         padding-right: 12px; // placement
         border-left-width: 1px;
         border-right-width: 1px;
-      }
-      &.left, &.right {
-        border-bottom-width: 1px;
-        border-top-width: 1px;
-      }
-    }
-    &.top {
-      //padding-bottom: ($vt_vpadding -$tab_indicator_size);
-      border-bottom-width: $tab_indicator_size;
-    }
-    &.bottom {
-      //padding-top: ($vt_vpadding -$tab_indicator_size);
-      border-top-width: $tab_indicator_size;
     }
-    &.left {
-      //padding-right: ($ht_hpadding -$tab_indicator_size);
-      border-right-width: $tab_indicator_size;
+  }
+  & header.left tab {
+    padding: $ht_vpadding $ht_hpadding;
+    border-right-width: $tab_indicator_size;
+    &.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
     }
-    &.right {
-      //padding-left: ($ht_hpadding -$tab_indicator_size);
-      border-left-width: $tab_indicator_size;
+  }
+  & header.right tab {
+    padding: $ht_vpadding $ht_hpadding;
+    border-left-width: $tab_indicator_size;
+    &.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
     }
+  }
+
+  tab {
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    background-color: transparent;
+
+    outline-offset: 0;
 
     //here's the interesting stuff
     &:hover {
@@ -1716,7 +1684,7 @@ notebook {
                              (bottom, top),
                              (left, right),
                              (right, left) {
-      &.reorderable-page.#{$_tab} {
+      .#{$_tab} &.reorderable-page {
         border-color: transparent;
         &:hover {
           border-color: transparentize($borders_color,0.7);
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c0529524ae..8d2a023076 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2128,104 +2128,75 @@ notebook {
     background-color: #2c2c2c; }
   notebook.frame {
     border: 1px solid #1c1f1f; }
-    notebook.frame.top {
-      border-top-width: 0; }
-    notebook.frame.bottom {
-      border-bottom-width: 0; }
-    notebook.frame.right {
-      border-right-width: 0; }
-    notebook.frame.left {
-      border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: #1f2222; }
-  notebook.header {
+  notebook header {
     background-color: #303535; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #1c1f1f; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: #1f2222; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px #1f2222; }
-    notebook.header.bottom {
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px #1f2222; }
-    notebook.header.right {
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 #1f2222; }
-    notebook.header.left {
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 #1f2222; }
-    notebook.header:backdrop {
+    notebook header:backdrop {
       background-color: #303535;
       box-shadow: none; }
-  notebook tab {
-    border-width: 0;
-    border-style: solid;
-    border-color: transparent;
-    background-color: transparent;
-    outline-offset: 0;
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */ }
-    notebook tab.top, notebook tab.bottom {
-      padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
-      padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
+  notebook header.top tab {
+    padding: 8px 20px;
+    border-bottom-width: 3px; }
+    notebook header.top tab.reorderable-page {
+      padding-left: 12px;
+      padding-right: 12px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+  notebook header.bottom tab {
+    padding: 8px 20px;
+    border-top-width: 3px; }
+    notebook header.bottom tab.reorderable-page {
       padding-left: 12px;
       padding-right: 12px;
       border-left-width: 1px;
       border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
+  notebook header.left tab {
+    padding: 5px 20px;
+    border-right-width: 3px; }
+    notebook header.left tab.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px; }
+  notebook header.right tab {
+    padding: 5px 20px;
+    border-left-width: 3px; }
+    notebook header.right tab.reorderable-page {
       border-bottom-width: 1px;
       border-top-width: 1px; }
-    notebook tab.top {
-      border-bottom-width: 3px; }
-    notebook tab.bottom {
-      border-top-width: 3px; }
-    notebook tab.left {
-      border-right-width: 3px; }
-    notebook tab.right {
-      border-left-width: 3px; }
+  notebook tab {
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    background-color: transparent;
+    outline-offset: 0; }
     notebook tab:hover {
       border-color: #1c1f1f; }
     notebook tab:active, notebook tab:backdrop:active {
@@ -2233,80 +2204,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-bottom-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-bottom-color: #215d9c; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-bottom-color: #215d9c; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-top-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-top-color: #215d9c; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-top-color: #215d9c; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-right-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-right-color: #215d9c; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-right-color: #215d9c; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(28, 31, 31, 0.3);
         border-left-color: #1c1f1f;
         background-color: rgba(57, 63, 63, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(57, 63, 63, 0.5);
         border-color: rgba(28, 31, 31, 0.5);
         border-left-color: #215d9c; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(57, 63, 63, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: #1f2222;
           background-color: #393f3f;
           border-left-color: #215d9c; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 9ce0c37abd..97d02b2714 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2134,104 +2134,75 @@ notebook {
     background-color: white; }
   notebook.frame {
     border: 1px solid #a1a1a1; }
-    notebook.frame.top {
-      border-top-width: 0; }
-    notebook.frame.bottom {
-      border-bottom-width: 0; }
-    notebook.frame.right {
-      border-right-width: 0; }
-    notebook.frame.left {
-      border-left-width: 0; }
     notebook.frame:backdrop {
       border-color: darkgray; }
-  notebook.header {
+  notebook header {
     background-color: #d6d6d6; }
-    notebook.header.frame {
+    .frame notebook header {
       border: 1px solid #a1a1a1; }
-      notebook.header.frame.top {
+      .frame notebook header.top {
         border-bottom-width: 0; }
-      notebook.header.frame.bottom {
+      .frame notebook header.bottom {
         border-top-width: 0; }
-      notebook.header.frame.right {
+      .frame notebook header.right {
         border-left-width: 0; }
-      notebook.header.frame.left {
+      .frame notebook header.left {
         border-right-width: 0; }
-      notebook.header.frame:backdrop {
+      .frame notebook header:backdrop {
         border-color: darkgray; }
-    notebook.header.top {
+    notebook header.top {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
-      notebook.header.top:backdrop {
+      notebook header.top:backdrop {
         box-shadow: inset 0 -1px darkgray; }
-    notebook.header.bottom {
+    notebook header.bottom {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
-      notebook.header.bottom:backdrop {
+      notebook header.bottom:backdrop {
         box-shadow: inset 0 1px darkgray; }
-    notebook.header.right {
+    notebook header.right {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
-      notebook.header.right:backdrop {
+      notebook header.right:backdrop {
         box-shadow: inset 1px 0 darkgray; }
-    notebook.header.left {
+    notebook header.left {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
-      notebook.header.left:backdrop {
+      notebook header.left:backdrop {
         box-shadow: inset -1px 0 darkgray; }
-    notebook.header:backdrop {
+    notebook header:backdrop {
       background-color: #d5d5d5;
       box-shadow: none; }
-  notebook tab {
-    border-width: 0;
-    border-style: solid;
-    border-color: transparent;
-    background-color: transparent;
-    outline-offset: 0;
-    /* works for testnotebookdnd, but there's a superfluous border
-       in gedit or web, commented out for now, needs gtk fixes
-    &.reorderable-page {
-      &.top {
-        padding-top: ($vt_vpadding - 1px);
-        border-top-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.bottom {
-        padding-bottom: ($vt_vpadding - 1px);
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      &.left {
-        padding-left: ($ht_hpadding - 1px);
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-      &.right {
-        padding-right: ($ht_hpadding - 1px);
-        border-right-width: 1px;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-      }
-    }
-    */ }
-    notebook tab.top, notebook tab.bottom {
-      padding: 8px 20px; }
-    notebook tab.left, notebook tab.right {
-      padding: 5px 20px; }
-    notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
+  notebook header.top tab {
+    padding: 8px 20px;
+    border-bottom-width: 3px; }
+    notebook header.top tab.reorderable-page {
+      padding-left: 12px;
+      padding-right: 12px;
+      border-left-width: 1px;
+      border-right-width: 1px; }
+  notebook header.bottom tab {
+    padding: 8px 20px;
+    border-top-width: 3px; }
+    notebook header.bottom tab.reorderable-page {
       padding-left: 12px;
       padding-right: 12px;
       border-left-width: 1px;
       border-right-width: 1px; }
-    notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
+  notebook header.left tab {
+    padding: 5px 20px;
+    border-right-width: 3px; }
+    notebook header.left tab.reorderable-page {
+      border-bottom-width: 1px;
+      border-top-width: 1px; }
+  notebook header.right tab {
+    padding: 5px 20px;
+    border-left-width: 3px; }
+    notebook header.right tab.reorderable-page {
       border-bottom-width: 1px;
       border-top-width: 1px; }
-    notebook tab.top {
-      border-bottom-width: 3px; }
-    notebook tab.bottom {
-      border-top-width: 3px; }
-    notebook tab.left {
-      border-right-width: 3px; }
-    notebook tab.right {
-      border-left-width: 3px; }
+  notebook tab {
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    background-color: transparent;
+    outline-offset: 0; }
     notebook tab:hover {
       border-color: #a1a1a1; }
     notebook tab:active, notebook tab:backdrop:active {
@@ -2239,80 +2210,80 @@ notebook {
     notebook tab:backdrop {
       background-color: transparent;
       border-color: transparent; }
-    notebook tab.reorderable-page.top {
+    .top notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.top:hover {
+      .top notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-bottom-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.top:active {
+      .top notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-bottom-color: #4a90d9; }
-        notebook tab.reorderable-page.top:active:hover {
+        .top notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.top:active:backdrop {
+        .top notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-bottom-color: #4a90d9; }
-      notebook tab.reorderable-page.top:backdrop {
+      .top notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.bottom {
+    .bottom notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.bottom:hover {
+      .bottom notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-top-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.bottom:active {
+      .bottom notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-top-color: #4a90d9; }
-        notebook tab.reorderable-page.bottom:active:hover {
+        .bottom notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.bottom:active:backdrop {
+        .bottom notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-top-color: #4a90d9; }
-      notebook tab.reorderable-page.bottom:backdrop {
+      .bottom notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.left {
+    .left notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.left:hover {
+      .left notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-right-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.left:active {
+      .left notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-right-color: #4a90d9; }
-        notebook tab.reorderable-page.left:active:hover {
+        .left notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.left:active:backdrop {
+        .left notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-right-color: #4a90d9; }
-      notebook tab.reorderable-page.left:backdrop {
+      .left notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
-    notebook tab.reorderable-page.right {
+    .right notebook tab.reorderable-page {
       border-color: transparent; }
-      notebook tab.reorderable-page.right:hover {
+      .right notebook tab.reorderable-page:hover {
         border-color: rgba(161, 161, 161, 0.3);
         border-left-color: #a1a1a1;
         background-color: rgba(237, 237, 237, 0.2); }
-      notebook tab.reorderable-page.right:active {
+      .right notebook tab.reorderable-page:active {
         background-color: rgba(237, 237, 237, 0.5);
         border-color: rgba(161, 161, 161, 0.5);
         border-left-color: #4a90d9; }
-        notebook tab.reorderable-page.right:active:hover {
+        .right notebook tab.reorderable-page:active:hover {
           background-color: rgba(237, 237, 237, 0.7); }
-        notebook tab.reorderable-page.right:active:backdrop {
+        .right notebook tab.reorderable-page:active:backdrop {
           border-color: darkgray;
           background-color: #ededed;
           border-left-color: #4a90d9; }
-      notebook tab.reorderable-page.right:backdrop {
+      .right notebook tab.reorderable-page:backdrop {
         border-color: transparent;
         background-color: transparent; }
     notebook tab label {
-- 
2.30.2